<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button v-if="$AUTH('product:product:addHH')" type="primary" icon="el-icon-plus" @click="add"></el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="search.productCode" placeholder="编码" clearable></el-input>
          <el-input v-model="search.productName" placeholder="产品名称" clearable></el-input>
		  <el-select v-model="search.saleStatus" placeholder="促销状态" clearable style="width:35rem;">
		  	<el-option label="无促销" value="0" /><el-option label="有促销" value="1" />
		  </el-select>
          <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" :loadNow="false" row-key="productId" @selection-change="selectionChange" stripe>
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="产品" prop="productId" width="150"></el-table-column>
        <el-table-column label="商家id" prop="departmentId" width="150"></el-table-column>
        <el-table-column label="系统栏目" prop="sysCategoryId" width="150"></el-table-column>
        <el-table-column label="系统栏目路径" prop="sysCategoryPath" width="150"></el-table-column>
        <el-table-column label="发布 区域全路径" prop="regionPath" width="150"></el-table-column>
        <el-table-column label="1新品 2二手货 3积分兑换  8自营店新品" prop="proType" width="150"></el-table-column>
        <el-table-column label="产品编码 国际化产品此编码相同" prop="productCode" width="150"></el-table-column>
        <el-table-column label="产品名称 最长35个字符" prop="productName" width="150"></el-table-column>
        <el-table-column label="宝贝卖点 150字" prop="shortDesc" width="150"></el-table-column>
        <el-table-column label="详细描述" prop="fullDesc" width="150"></el-table-column>
        <el-table-column label="搜索关键字" prop="searchKey" width="150"></el-table-column>
        <el-table-column label="商品条形码" prop="barCode" width="150"></el-table-column>
        <el-table-column label="市场价格" prop="listPrice" width="150"></el-table-column>
        <el-table-column label="价格 一口价" prop="price" width="150"></el-table-column>
        <el-table-column label="成本" prop="costPrice" width="150"></el-table-column>
        <el-table-column label="产品页面模板" prop="templatePath" width="150"></el-table-column>
        <el-table-column label="促销状态 0无促销 1有促销" prop="saleStatus" width="150"></el-table-column>
        <el-table-column label="采购地路径" prop="fromPath" width="150"></el-table-column>
        <el-table-column label="会员等级 拥有高于该等级的用户才能购买" prop="membershipLevel" width="150"></el-table-column>
        <el-table-column label="橱窗推荐 1是 0否" prop="isPush" width="150"></el-table-column>
        <el-table-column label="排序降序" prop="seq" width="150"></el-table-column>
        <el-table-column label="购买竞价排序" prop="buySeq" width="150"></el-table-column>
        <el-table-column label="默认图片" prop="defImg" width="150"></el-table-column>
        <el-table-column label="1已发布 0库存临时 2待审核发布 3审核不通过" prop="status" width="150"></el-table-column>
        <el-table-column label="操作" fixed="right" align="right">
          <template #default="scope">
            <el-button v-if="$AUTH('product:product:editHH')" type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button v-if="$AUTH('product:product:delHH')" type="text" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>

  <productEdit-dialog v-if="dialog.productEdit" ref="productEditDialog" @success="handleSaveSuccess" @closed="dialog.productEdit=false"></productEdit-dialog>
</template>

<script>
  import productAPI from '@/api/product/product';
  import productEditDialog from './productEdit';//1--导入
  export default {
    name: 'product',
    components: {
        productEditDialog//2发布
    },
    data() {
      return {
        dialog: {
          productEdit: false
        },
        apiObj: productAPI.product.list,
        selection: [],
        search: {
          keyword: null,createTime: null,sysCode: 'HuaHui',productCode: null,productName: null,saleStatus: null,
        },
		systemTypeName: "栏目",
      }
    },
	mounted() {
		this.upsearch();//延时加载数据，达到自定义过滤效果。
	},
    methods: {
      //添加
      add(){
        this.dialog.productEdit = true
        this.$nextTick(() => {
          this.$refs.productEditDialog.open()
        })
      },
      //编辑
      table_edit(row){
        this.dialog.productEdit = true
        this.$nextTick(() => {
          this.$refs.productEditDialog.open('edit').setData(row)
        })
      },
      //删除
      async table_del(row){
        var confirm = await this.$confirm('确定删除选中的项吗？', '提示', {
          confirmButtonText: 'ok',
          type: 'warning'
        }).catch(() => {})
        if(confirm !== 'confirm'){
          return false;
        }
        var res = await productAPI.product.delete.delete(row.productId);
        if(res.code === 2000){
          this.$refs.table.refresh();
          this.$message.success("删除成功");
        }else{
          this.$alert(res.message, "提示", {type: 'error'});
        }
      },
      //表格选择后回调事件
      selectionChange(selection){
        this.selection = selection;
      },
      //搜索
      upsearch(){
        this.$refs.table.upData(this.search);
      },
      //本地更新数据
      handleSaveSuccess(){
        this.$refs.table.refresh();
      },
      handlePermissionSuccess(){
        this.$refs.table.refresh();
      },
      handleDataSuccess(){
        this.$refs.table.refresh();
      },
      formatDate(row,column) {// 获取单元格数据
        let data = row[column.property];
        if(data == null) {
          return null;
        }
        let dt = new Date(data);
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
      },
    }
  }
</script>
<style>
</style>
